<template>
  <view class="member-container">
    <!-- 会员卡区域 -->
    <view class="member-card">
      <view class="title">
        <img style="width: 42rpx; height: 42rpx;" src="../../static/sc.png" alt="">
        <text style="margin-left: 7rpx; font-weight: bold;">华靓甄选</text>
      </view>
      <view class="myHy">
        <!-- <uni-icons type="vip-filled" color="#fff" size="22"></uni-icons> -->
        <text style="font-weight: bold; font-size: 36rpx;">华靓会员</text>
      </view>
      <!-- <view class="hyTime" v-if="!is_member">会员待充值</view> -->
      <!-- <view class="hyTime" v-if="is_member">会员生效中</view> -->
    </view>

    <!-- 套餐选择 -->
		<view class="member-content">
			<view class="member-title">选择充值套餐</view>
			<view 
        class="plan-item" 
        v-for="plan in plans" 
        :key="plan.id"
        :class="{ 'selected': selectedPlan.id === plan.id, 'default': plan.defaultStyle }"
        @click="selectPlan(plan)"
      >
        <text>¥{{plan.price}}</text>
      </view>
		</view>
    
    <!-- 地址区域 -->
    <!-- <view v-if="selectedAddress.userName" class="shipment" hover-class="shipment-click" @click="chooseAddress">
			<view class="user"> {{ selectedAddress.userName }} {{ selectedAddress.telNumber }} </view>
			<view class="address">
				{{ selectedAddress.provinceName }}
				{{ selectedAddress.cityName }}{{ selectedAddress.countyName }}{{ selectedAddress.detailInfo }}
			</view>
			<uni-icons class="icon" type="right"></uni-icons>
		</view>
		<view v-else class="shipment" hover-class="shipment-click" @click="chooseAddress">
			<view class="address"> 点击选择收货地址 </view>
			<uni-icons class="icon" type="right"></uni-icons>
		</view> -->

    <!-- 充值按钮 -->
    <button class="recharge-btn" style="margin-bottom: 50rpx; margin-top: 50rpx;" @click="handleRecharge">
      <text>立即开通</text>
      <uni-icons type="forward" color="white" size="18"></uni-icons>
    </button>

    <view class="btom">
			<view class="btom-top">会员权益</view>
			<view class="btom-item">
				<view class="btom-item-left">
					<view class="btom-item-left-img">
						<image src="../../static/baoyou.png"></image>
					</view>
					一年有效
				</view>
				<view class="btom-item-left">
					<view class="btom-item-left-img">
						<image src="../../static/dazhe.png"></image>
					</view>
					专属折扣
				</view>
			</view>

			<view class="btom-item">
				<view class="btom-item-left">
					<view class="btom-item-left-img">
						<image src="../../static/kefu.png"></image>
					</view>
					专属客服
				</view>
				<view class="btom-item-left">
					<view class="btom-item-left-img">
						<image src="../../static/lipin.png"></image>
					</view>
					神秘礼品
				</view>
			</view>
		</view>

    <ws-wx-privacy id="privacy-popup"></ws-wx-privacy>
  </view>
</template>

<script>
import { uniFetch } from '../../api/uni-fetch';
import { useUserStore } from '../../store/user';
export default {
	data() {
		return {
      selectedPlan: {},
      plans: [],
      // selectedAddress: {},
      // is_member: null,
      store: {},
      phone: ''
		};
	},
  onShow() {
    const res = uni.getStorageSync('userLoginCode')
    this.phone = res?.user?.phone
    // console.log(this.phone, 'phone');
    
    this.getMemberList()

    this.store = useUserStore()
    // this.is_member = this.store?.memberInfo?.is_member
  },
  methods: {
    // 选择地址
    // chooseAddress() {
    //   // 隐私
    //   wx.getPrivacySetting({
    //     success: res => {
    //       console.log(res)
    //       if (res.needAuthorization) {
    //         // 需要弹出隐私协议
    //         console.log(res, '隐私');
    //       } else {
    //         // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
    //         console.log('隐私条款suc');
    //       }
    //     },
    //     fail: (err) => {
    //       console.log(err.msg, '隐私协议接口出错');
    //     },
    //   })

    //   uni.chooseAddress({
    //     success: (res) => {
    //       this.selectedAddress = res
    //       // this.selectedAddress.telNumber = '18256098464'
    //     },
    //     fail(err) {
    //       console.log(err);
    //     }
    //   })
    // },
    // 会员列表
    async getMemberList () {
      const res = await uniFetch.post('/user-member/list', {
        app_id: uni.appId
      })
      this.plans = res.data.map(item => {
        return {
          ...item,
          defaultStyle: item.id === 1
        }
      })
    },
    // 套餐切换
    selectPlan(plan) {
      this.selectedPlan = plan;
      this.plans.forEach(p => p.defaultStyle = p.id === plan.id ? false : true);
    },
    // 充值
    async handleRecharge() {
      // if (!this.selectedAddress.userName) {
      //   return uni.showToast({
      //     icon: 'none',
      //     title: '请选择收货地址'
      //   })
      // }

      if (!this.selectedPlan.id) {
        uni.showToast({ title: '请选择充值套餐', icon: 'none' });
        return;
      }

      uni.showLoading({ title: '处理中...' });
      
      try {
        const payres = await uniFetch.post('/member-order/create', {
          app_id: uni.appId,
          id: this.selectedPlan.id,
          // address: this.selectedAddress
          address: {},
          phone: this.phone
        })

        if (payres.code != '10000') {
          uni.showToast({
            icon: 'none',
            title: payres.msg
          })
          return
        }

        wx.requestPayment({
          timeStamp: String(payres.data.timestamp),
          nonceStr: payres.data.nonceStr,
          package: payres.data.package,
          "signType": "MD5",
          paySign: payres.data.paySign,
          success: async (res) => {
            if (res.errMsg == 'requestPayment:ok') {
              // 更新状态
              const member = await uni.request({
                url: uniFetch.baseURL + '/user/user-member',
                method: 'POST',
                header: {
                  token: this.store.token
                }
              })
              this.store.memberInfo = member.data.data

              uni.showToast({
                icon: 'none',
                title: '支付成功',
                duration: 2000,
              })
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }, 2000);
            }
          },
          fail: (err) => {
            uni.showToast({
              icon: 'none',
              title: '取消支付'
            })
            console.log(err, 'err');
          }
        })
      } catch (err) {
        uni.showToast({ title: '网络错误', icon: 'none' });
      } finally {
        uni.hideLoading();
      }
    }
  },
};
</script>

<style scoped lang="scss">
.btom {
		margin: 0 auto;
		width: 95%;
		height: 300rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx;
		overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		.btom-item {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 20rpx;
			.btom-item-left {
				width: 47%;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #E0B58C;
				font-size: 35rpx;
				.btom-item-left-img {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.btom-top {
			width: 200rpx;
			height: 50rpx;
			background-color: #ea6056;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
		}
	}
.shipment {
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid #f0f0f0;
  transition: box-shadow 0.3s ease;
	position: relative;
	padding: 30rpx;
	font-size: 32rpx;
	border-radius: 10rpx;
	border: 1rpx solid #fdfdfd;
	background-color: #fff;
  margin-bottom: 0rpx;

	.icon {
		font-size: 36rpx;
		color: #333;
		transform: translateY(-50%);
		position: absolute;
		top: 50%;
		right: 20rpx;
	}

	.user {
		color: #333;
		margin-bottom: 5rpx;
	}

	.address {
		color: #666;
	}
}

.shipment-click {
	background-color: #f1f1f1;
}

.plan-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  height: 100rpx;
  width: 200rpx;
  border-radius: 20rpx;
  font-weight: bold;
	color: #745d3d;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  &:hover {
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  }
  &.selected {
    box-shadow: 0 8rpx 24rpx rgba(255, 154, 0, 0.3);
  }
  &.default {
    color: #7f6336; /* 金黄色字体 */
    background: white;
  }
  &.selected {
    color: white;
    background: linear-gradient(to right, #d1b280, #e9d5b5);
  }
}

.recharge-btn[disabled] {
  opacity: 0.6;
  background: #ccc !important;
}
.member-container {
  padding: 40rpx;
  background: #f8f8f8;
  min-height: 100vh;
}

.member-card {
  position: relative;
  height: 300rpx; /* 增加高度 */
  border-radius: 20rpx;
  overflow: hidden;
  color: #f8f8f8;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  background: url('../../static/hy2.png') no-repeat center center;
  background-size: cover;
  .title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 30rpx;
    padding: 20rpx 30rpx 20rpx 0;
  }
  .myHy {
    padding: 5rpx 0 10rpx 50rpx;
    display: flex;
    align-items: center;
  }
  .hyTime {
    padding: 0rpx 0 20rpx 50rpx;
    font-size: 38rpx;
  }
}

.member-content {
  padding: 32rpx 0;
  border-radius: 32rpx 32rpx 0 0;
  margin-top: 0rpx;
  position: relative;
  z-index: 10;
  backdrop-filter: blur(20rpx);
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.member-title {
  font-size: 33rpx;
  font-weight: bold;
	color: #414345;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.recharge-btn {
  background: linear-gradient(to right, #ea6056, #f97f7f);
  color: white;
  border-radius: 50rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
  margin-top: 18rpx;
  box-shadow: 0 10rpx 20rpx rgba(255, 154, 158, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rpx;
}
</style>